<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/index/weclome.css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<style type="text/css">
body {
	color: #7D7D7D;
}
.scenicSpot{
	margin-left: 150px;
}
.top-50{
	width:80%;
	margin: 30px auto;
}
</style>
<title>数据统计</title>
</head>
<body>
	<!-- top 统计 -->
	<div class="top-50">
		<h4>当日统计</h4>
		<div style="display: flex">
			<div class="ml-80 ta-c gray-div">
				<div class="bule-txt" id="entryNums">${entryNums }</div>
				<div class="gray-txt">当天入园人数</div>
			</div>
			<div class="ml-80 ta-c gray-div">
				<div class="bule-txt" id="outlineSellNums">${outlineSellNums }</div>
				<div class="gray-txt">线下购票人数</div>
			</div>
			<div class="ml-80 ta-c gray-div">
				<div class="bule-txt" id="onlineSellNums">${onlineSellNums}</div>
				<div class="gray-txt">线上购票人数</div>
			</div>
			<c:if test="${scenicSpotList != null && fn:length(scenicSpotList) > 0 }">
				<div class="scenicSpot">
					<span class="select-box inline">
						<select name="" class="select" id="scenicSpotId">
							<option value="">请选择景区</option>
							<c:forEach var="scenicSpot" items="${scenicSpotList}">
								<option value="${scenicSpot.key }">${scenicSpot.value}</option>
							</c:forEach>
						</select>
					</span>
					<button class="btn btn-success" type="submit" onclick="reloadData()"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
				</div>
			</c:if>
		</div>
	</div>
	<!-- 近7日数据统计 -->
	<div class="top-50">
		<h4>近7日数据统计</h4>
		<div class="col-md-8" style="width: 100%">
			<div id="barMain" class="main" style="width: 90%; height: 200px"></div>
			<div style="display: flex">
				<div id="pieMain" class="main" style="width: 40%; height: 200px"></div>
				<div id="channelPieMain" class="main ml-80" style="width: 40%; height: 200px"></div>
			</div>
			
		</div>
	</div>
</body>
<script src="${ctx}/static/plug/echarts/echarts.js"></script>
<script type="text/javascript">
	$(function() {
		var sellTickStatisLast7DayListStr = '${sellTickStatisLast7DayList}';
		var pieDataStr = '${pieData}';
		var channelPieDataStr = '${channelPieData}';
		dataStatistics(sellTickStatisLast7DayListStr, pieDataStr ,channelPieDataStr);
	});
	
	function reloadData() {
		var scenicSpotId = $("#scenicSpotId").val();
		var params =  {
			"scenicSpotId" :	scenicSpotId			
		}
		$.post("${ctx}/index/scenicSpotStatistics",params  , function(obj) {
			console.log(obj)
			console.log(obj.sellTickStatisLast7DayList)
			console.log(obj.pieData)
			console.log(obj.channelPieData)
			$("#entryNums").text(obj.entryNums)
			$("#outlineSellNums").text(obj.outlineSellNums)
			$("#onlineSellNums").text(obj.onlineSellNums)
			dataStatistics(obj.sellTickStatisLast7DayList, obj.pieData ,obj.channelPieData);
		});
		
	}
	
	function dataStatistics(sellTickStatisLast7DayListStr, pieDataStr ,channelPieDataStr) {
		require.config({
			paths : {
				echarts : 'http://echarts.baidu.com/build/dist'
			}
		});
		
		require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/pie' ], function(ec) {
			var barChart = ec.init(document.getElementById('barMain'));
			var sellTickStatisLast7Day = JSON.parse(sellTickStatisLast7DayListStr);
			var xArray = sellTickStatisLast7Day.xArray;
			var yType = sellTickStatisLast7Day.yType;
			var dataMap = sellTickStatisLast7Day.dataMap;
			var seriesDataArray = new Array();
			for (var i = 0; i < yType.length; i++) {
				var seriesData = new Object();
				seriesData.name = yType[i];
				seriesData.type = 'bar';
				seriesData.data = dataMap[seriesData.name];
				seriesDataArray[i] = seriesData;
			}
			var barOption = {
				title : {
					text : '近7日售票统计',
					textStyle : {
						color : '#7D7D7D',
						fontSize : 15
					},
				}, tooltip : {
			        trigger: 'axis'
			    },
				toolbox : {
					show : true,
					feature : {
					}
				},
				legend : {
					data : yType
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					data : xArray
				} ],
				yAxis : [ {
					type : 'value'
				} ],
				series : seriesDataArray
			}

			var pieChart = ec.init(document.getElementById('pieMain'));
			var pieData = JSON.parse(pieDataStr);
			var typeArray = pieData.typeArray;
			var dataArray = pieData.dataArray;
			var pieDataArray = new Array();
			for (var i = 0; i < yType.length; i++) {
				var seriesData = new Object();
				seriesData.name = typeArray[i];
				seriesData.value = dataArray[i][seriesData.name];
				pieDataArray[i] = seriesData;
			}
			var pieOption = {
				title : {
					text : '近7日售票分布',
					textStyle : {
						color : '#7D7D7D',
						fontSize : 15
					},
					x : 'center'
				},
				toolbox : {
					show : true,
					feature : {
					}
				},tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
				legend : {
					orient : 'vertical',
					x : 'left',
					data : typeArray
				},
				series : [ {
					name : '售票分布',
					type : 'pie',
					radius : '55%',
					center : [ '50%', '60%' ],
					data : pieDataArray
				} ]
			}
			
			var channelPieChart = ec.init(document.getElementById('channelPieMain'));
			var channelPieData = JSON.parse(channelPieDataStr);
			var channelTypeArray = channelPieData.typeArray;
			var channelDataArray = channelPieData.dataArray;
			var channelPieDataArray = new Array();
			for (var i = 0; i < channelTypeArray.length; i++) {
				var seriesData = new Object();
				seriesData.name = channelTypeArray[i];
				seriesData.value = channelDataArray[i][seriesData.name];
				channelPieDataArray[i] = seriesData;
			}
			var channelPieOption = {
				title : {
					text : '近7日售票渠道分布',
					textStyle : {
						color : '#7D7D7D',
						fontSize : 15
					},
					x : 'center'
				},
				toolbox : {
					show : true,
					feature : {
					}
				},tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
				legend : {
					orient : 'vertical',
					x : 'left',
					data : channelTypeArray
				},
				series : [ {
					name : '售票渠道分布',
					type : 'pie',
					radius : '55%',
					center : [ '50%', '60%' ],
					data : channelPieDataArray
				} ]
			}

			barChart.setOption(barOption);
			pieChart.setOption(pieOption);
			channelPieChart.setOption(channelPieOption);
			
			window.addEventListener("resize", function () {
				channelPieChart.resize();
				pieChart.resize();
				barChart.resize();
        	});
		});
	}


</script>
</html>
